<!DOCTYPE html>
<html>
<head lang="en">
    <%include head.ejs%>
    <meta charset="UTF-8">
    <title>文档编辑</title>

    <link rel="stylesheet" href="/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/summernote.css"/>
</head>
<style>
    body {
        background-image:url(/images/about_pattern.png);
    }

    h2 {
        text-align: center;
        color: #428bca;
    }
    .editpage {
        min-height: 700px;
    }

    .editpage .edit-wrap {
         padding: 20px 0;
    }
    .editpage .edit-wrap>div{
        background-color: #ffffff;
    }

    .editpage .download {
        margin: 10px 0;
        text-align: center;
        font-size: 20px;
    }


     .modal-header {
        background-color: #2f4154;
    }

    #messageForm span {
        display: none;
    }

</style>
<body>
<%include not_index_nav.ejs%>

<div class="editpage container">
    <div class="row">

        <h2>文档编辑器</h2>
        <div class="edit-wrap col-md-12">

            <div id="summernote">
            </div>
        </div>
        <div class="download">
            <a id="btn-download" href="javascript:void(0);"  class="btn btn-lg btn-primary">保存文档</a>
            <a id="btn-reset"href="javascript:void(0);" class="btn btn-lg btn-danger">重置</a>
        </div>
    </div>
</div>

<div class="modal" id="modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title text-center" id="myModalLabel">
                </h4>
            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col-md-12">
                        <h4 class="text-center">保存文档</h4>

                        <form id="messageForm" class="form">

                            <div id="titleGroup" class="form-group">
                                <input type="text" class="form-control" placeholder="标题(1-20位)" id="title"
                                       name="title">
                            </div>

                            <div id="abstractGroup" class="form-group">
                                <textarea placeholder="备注" id="abstract" name="abstract" class="form-control"
                                          rows="3"></textarea>
                            </div>

                        </form>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btn-send">提交</button>
            </div>
        </div>

    </div>

</div>


<%include footer.ejs%>
<%include basejs.ejs%>
</body>
<script src="/js/vendor/summernote.min.js"></script>
<script src="/js/vendor/summernote-zh-CN.js"></script>
<script src="/js/model/Article.js"></script>
<script>
    $(function() {
        var article = new Article();
        var contentHtml;
        $('#summernote').summernote({
            height: 300,
            minHeight: null,
            maxHeight: null,
            focus: true,
            lang: 'zh-CN'
        });

        $('#btn-download').on('click', function () {
            contentHtml = $('#summernote').code();
            $('#modal').modal('show');
        });

        $('#btn-send').on('click', function () {
            if (isValidPass()) {
                article.title = $('#title').val();
                article.abstract = $('#abstract').val();
                article.content = contentHtml;
                article.save();
            }
        });

    });
</script>
</html>